<template>
  <div>
    <el-dialog
      close-on-press-escape
      v-dialogDrag
      :title="form.token ? '编辑' : '添加'"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      @close="handleClose"
      width="750px"
    >
      <div>
        <div v-init-screen-h="100">
          <el-form
            style="margin-left: 80px"
            :model="form"
            ref="form"
            :rules="rules"
            label-width="80px"
            :inline="false"
            size="small"
          >
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item label="名称" prop="name">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="版次" prop="version">
                  <el-input
                    placeholder="请输入"
                    v-model="form.version"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="状态" prop="state">
                  <el-radio-group v-model="form.state">
                    <el-radio label="true">启用</el-radio>
                    <el-radio label="false">禁用</el-radio>
                  </el-radio-group>
                </el-form-item></el-col
              >
            </el-row>
          </el-form>
          <el-tabs
            v-model="activeTabName"
            :tab-position="tabPosition"
            class="tabHight"
          >
            <el-tab-pane name="1" label="通用条件">
              <div class="check_data">
                <div class="line_furnace">
                  <!-- disabled -->
                  <el-checkbox-group v-model="checkboxGroup1" size="small">
                    <el-checkbox
                      :disabled="item.id == 'template'"
                      :label="item.id"
                      border
                      v-for="item in basicsList1"
                      :key="item.id"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <el-checkbox-group v-model="checkboxGroup2" size="small">
                  <el-checkbox
                    :label="item.id"
                    border
                    v-for="item in basicsList2"
                    :key="item.id"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-tab-pane>
            <el-tab-pane name="2" label="高级条件">
              <div class="furnace_drawer" v-if="list.length">
                <el-collapse v-model="activeNames" @change="handleChange">
                  <el-collapse-item
                    :title="item.name"
                    :name="item.id"
                    v-for="item in list"
                    :key="item.id"
                  >
                    <template slot="title">
                      <div class="flex-x">
                        <img
                          class="img"
                          src="@/assets/images/S_icon.png"
                          alt=""
                        />
                        <span
                          :style="{
                            color:
                              item.checkList1.length || item.checkList2.length
                                ? '#409EFF'
                                : '',
                            fontSize: '15px',
                          }"
                        >
                          {{ item.name }}
                        </span>
                        <span style="margin: 0 4px; color: #999">
                          版本: {{ item.version }}
                        </span>
                        <span style="color: #999">
                          负责人: {{ item.author }}
                        </span>
                      </div>
                    </template>
                    <div style="margin-bottom: 10px">
                      <div style="font-size: 14px">主工艺条件</div>
                      <el-checkbox-group v-model="item.checkList1">
                        <el-checkbox
                          :label="index"
                          v-for="(data, index) in item.technologyParameter"
                          :key="data.key"
                          >{{ data.key }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </div>
                    <div>
                      <div style="font-size: 14px">工艺配方条件</div>
                      <el-checkbox-group v-model="item.checkList2">
                        <el-checkbox
                          :label="index"
                          v-for="(data, index) in item.formulaParameter"
                          :key="data.key"
                          >{{ data.key }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <span
          class="dialog-footer flex-x flex-right"
          style="padding-right: 20px"
        >
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button
            :loading="btnLoading"
            size="small"
            type="primary"
            @click="handleSubmit"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postRule, putRule } from "@/api/productionRule";

import { VERSION_RULES } from "@/utils/local";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: true,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    username() {
      return this.$store.state.user.user.username;
    },
  },
  data() {
    return {
      btnLoading: false,
      checkboxGroup1: ["template"],
      checkboxGroup2: [],
      basicsList2: [
        {
          name: "设备类型",
          id: "deviceTypeToken",
        },
        {
          name: "设备",
          id: "deviceToken",
        },
      ],
      basicsList1: [
        {
          name: "工艺模板",
          id: "template",
        },
        {
          name: "零件类型",
          id: "partNumber",
        },
        {
          name: "工序号",
          id: "processNumber",
        },
      ],
      activeTabName: "1",
      activeNames: "",
      direction: "rtl",
      tabPosition: "left",
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "blur" }],
        version: VERSION_RULES,
      },
      form: {
        name: "",
        state: "true",
        version: "",
        token: "",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    setCheck(arr, id, item) {
      return arr.map((m) => {
        return {
          index: m,
          templateId: id,
          type: item[m].type, //单值条件
        };
      });
    },
    handleSubmit(formName) {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.form.author = this.username;
          let condition_3 = [];
          let condition_4 = [];

          this.list.forEach((item) => {
            condition_3 = condition_3.concat(
              this.setCheck(item.checkList1, item.id, item.technologyParameter)
            );
            condition_4 = condition_4.concat(
              this.setCheck(item.checkList2, item.id, item.formulaParameter)
            );
          });
          const form = {
            condition_1: this.checkboxGroup1,
            condition_2: this.checkboxGroup2,
            condition_3,
            condition_4,
            ...this.form,
          };
          this.btnLoading = true;
          try {
            if (this.form.token) {
              await putRule(form, this.form.token);
            } else {
              await postRule(form);
            }
            this.activeTabName = "1";
            this.$msg({
              message: "提交成功",
              type: "success",
            });
            this.form = {
              name: "",
              state: "true",
              version: "",
              token: "",
            };
            this.handleClose(true);
            this.checkboxGroup1 = ["template"];
            this.checkboxGroup2 = [];
            this.btnLoading = false;
          } catch (error) {}
        } else {
          this.activeTabName = "1";
        }
      });
    },
    resetForm() {
      this.activeTabName = "1";
      this.checkboxGroup1 = ["template"];
      this.checkboxGroup2 = [];

      this.form = {
        name: "",
        state: "true",
        version: "",
        token: "",
      };
      this.$refs["form"].resetFields();
    },
    handleChange() {},
    handleClose(isRefresh) {
      this.resetForm();
      this.$emit("handleClose", isRefresh);
    },
    //获取模板列表
    init() {},
  },
};
</script>

<style lang='scss' scoped>
.check_data {
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 0;
  .line_furnace {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  /* margin-left: 20px; */
  /* /deep/ .el-checkbox {
    width: 28%;
  }
  /deep/ .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  } */
}
.furnace_drawer {
  padding: 0 20px 0 0;
  .img {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }
}
</style>